<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="16">
				<el-input style="width: 100%;margin-bottom: 10px;" placeholder="请输入要查看的地区,点击回车键"
					suffix-icon="el-icon-search" v-model="search_area" @change="handleSearch(search_area)">
				</el-input>
			</el-col>
			<el-col :span="8">
				<el-checkbox style="width: 100%;margin-bottom: 10px;" v-model="select_all_areas" @change="handleAllArea"
					label="全选" border>
				</el-checkbox>
			</el-col>
		</el-row>
		<el-checkbox-group v-model="c_area_id" @change="selectOnArea">
			<el-table :data="areas_data" row-key="id" border :header-cell-style="{background:'#ccc', color: '#003366'}"
				:tree-props="{children: 'children'}" max-height="300" default-expand-all>
				<el-table-column prop="title" label="省份 (社区)">
					<template #default="scope">
						<span>{{scope.row.title}}</span>
						<span :style="{'color' : (scope.row.is_community == '1' ? 'green' : 'red')}"
							style="margin-left: 10px;">({{scope.row.is_community == "1" ? "是" : "否" }})</span>
					</template>
				</el-table-column>
				<el-table-column prop="id" label="ID">
				</el-table-column>
				<el-table-column label="操作">
					<template #default="scope">
						<el-checkbox :label="scope.row.id">选择该辖区</el-checkbox>
					</template>
				</el-table-column>
			</el-table>
		</el-checkbox-group>
	</div>
</template>

<script>
	import API from '@/api/index.js'

	export default {
		data() {
			return {
				select_all_areas: false,
				areas_data: [], // 获取社区
				search_area: '', // 搜索社区名
				c_area_id: [], // 社区id
				allAreas: []
			}
		},
		props: ['area_id'],
		watch: {
			area_id(val) {
				this.c_area_id = val;
			}
		},
		mounted() {
			this.getAreas();
		},
		methods: {
			// 获取社区
			getAreas() {
				let self = this;
				API.areas(1, 10).then(res => {
					let data = res.data;
					self.$notify({
						message: '获取社区成功'
					});
					self.areas_data = data.data;
					data.data.map(item => {
						self.allAreas.push(item.id);
						if (item.children) {
							item.children.map(childrenItem => {
								self.allAreas.push(childrenItem.id);
								if (childrenItem.children) {
									childrenItem.children.map(threeItem => {
										self.allAreas.push(threeItem.id);
										if(threeItem.children) {
											threeItem.children.map(fourItem => {
												self.allAreas.push(fourItem.id);
											})
										}
									});
								}
							});
						}
					});
				}).catch(err => {
					self.$message.error(err.response.data.message)
				});
			},

			// 搜索社区名
			handleSearch() {
				let self = this;
				self.loading = true;
				API.areas(1, 10, '', self.search_area).then(res => {
					let data = res.data;
					self.areas_data = data.data;
				}).catch(err => {
					self.$message.error(err.response.data.message)
				});
			},

			// 全选 
			handleAllArea(val) {
				let self = this;
				self.c_area_id = val ? self.allAreas : [];
				self.$emit('getAreaId', {
					area_id: self.c_area_id
				});
			},

			// 不全选
			selectOnArea(val) {
				let self = this;
				let checkedCount = val.length;
				self.select_all_areas = checkedCount === self.allAreas.length;
				self.$emit('getAreaId', {
					area_id: self.c_area_id
				});
			}

		}
	}
</script>

<style>
</style>
